<template>
	<view class="orderList container">
		<view class="w100    mb20  fixhead"><u-tabs bg-color="#f1f1f1" bar-width="70" :list="list" :is-scroll="false" :current="current" @change="tabsChange"></u-tabs></view>
		<view class="w100" style="height: 92rpx;"></view>

		<view class="container">
			<view class="w100 flex-xy" v-if="quanList.length>0">
				<view class="w90 bgF radio20  mt20 mb30 pt20 pb20 pl20 pr20" v-for="(items, i) in quanList" v-bind:key="i">
					<view class="100 flex-spc-x">
						<view class="cob3 fs35">订单编号：{{ items.id }}</view>
						<view class="coe04 fs35">已兑换</view>
					</view>
			
					<!-- 线 -->
					<view class="w100 bgF2 mt20 mb20" style="height: 1px;"></view>
			
					<view class="w100 flex-spc-x" style="height: 150rpx;">
						<!-- 左 -->
						<view class="w30 "><image :src="items.images" mode="scaleToFill" style="width: 150rpx; height: 150rpx;"></image></view>
						<!-- 中 -->
						<view class="w50 h100">
							<view class="w100 textOver   fs35 pl10">{{ items.name }}</view>
							<!-- <view class="w100 textOver  cob3  fs30 pl10 pt10 pb10">兑换时间：000000000000</view> -->
						</view>
						<!-- 右 -->
						<view class="w20 h100">
							<view class="w100 textOver  tar  pl10">
								<text>￥</text>
								<text class="fs40">{{ items.price }}</text>
							</view>
						</view>
					</view>
			
					<view>
						<view style="width: 180rpx; height: 50rpx; border: 1px solid #E04342;" class=" flex-xy fs30 radio50 coe04 mt20 mb20 flor" @click="showCode(i)">立即使用</view>
					</view>
				</view>
			</view>
			
			<view v-else class="container flex-xy">
				<view class="w100" style="height: 92rpx;"></view>
				<image src="../../static/noMsg.png" mode="widthFix" style="width: 60%;" class="pt50"></image>
			</view>
		</view>
	
		<!-- 兑换二维码 -->
		<u-popup v-model="show" mode="center " border-radius="20">
			<view class="w100 h100 flex-xy">
				<view class="bgF radio20 " style="height: 510rpx;width: 400rpx;">
					<view class="flex-xy w100 bgF" style="height: 400rpx ;border-radius: 20rpx 20rpx 0 0; ">
						<tki-qrcode ref="qrcode" v-if="ifShow" cid="qrcode2" :val="val" :size="size" :onval="onval" :loadMake="loadMake" :usingComponents="true"></tki-qrcode>
					</view>
					<view class="w100 flex-xy" style="height: 110rpx;">
					<view class="fs28 mb10">长按识别上方二维码</view>
						<view @click="failConfirm" class="w60 coF fs30 radio50 flex-xy  " style="background: #EC1C1C;height: 50rpx;">确 认</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
var api = require('../../api/api.js');
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
export default {
	components: { tkiQrcode },
	data() {
		return {
			ifShow: true,
			val: '', // 要生成的二维码值
			size: 360, // 二维码大小
			unit: 'rpx', // 单位
			background: '#b4e9e2', // 背景色
			foreground: '#309286', // 前景色
			pdground: '#32dbc6', // 角标色
			icon: '', // 二维码图标
			iconsize: 40, // 二维码图标大小
			lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
			onval: false, // val值变化时自动重新生成二维码
			loadMake: true, // 组件加载完成后自动生成二维码
			src: '', // 二维码生成后的图片地址或base64
			show: false,
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			list: [
				{
					name: '全部'
				}
			],
			quanList: []
		};
	},
	created() {
		this.quan();
	},
	onShow() {
		if (this.judgeLoading()) {
			
		} else {
			// 本地没有token  需要跳转到登陆页面
			uni.navigateTo({
				url: '/pages/index/login'
			});
		}
	},
	methods: {
		// 兑换失败确认
		failConfirm() {
			this.show = false;
		},
		showCode(i) {
			var text = this.quanList[i].url;
			console.log(text);
			this.val = text;
			this.show = true;
		},
		// 获取券二维码
		quan() {
			this.quanList = [];
			this.username = uni.getStorageSync('username');
			uni.request({
				url: api.My,
				method: 'post',
				data: {
					desc: uni.getStorageSync('username')
				},
				success: res => {
					if (res.data.errno == 0) {
						this.quanList = res.data.data.quanList;
						console.log(res);
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.fixhead {
	position: fixed;
	left: 0;
	top: 70rpx;
	z-index: 9999;
}
</style>
